import React, { useState, useEffect } from 'react';
import type { DanmuSettings } from '../types/danmuSettings';
import './DanmuSettings.css';

interface DanmuSettingsProps {
    settings: DanmuSettings;
    onSettingsChange: (settings: DanmuSettings) => void;
    onClose: () => void;
}

const DanmuSettingsPanel: React.FC<DanmuSettingsProps> = ({
    settings,
    onSettingsChange,
    onClose
}) => {
    const [localSettings, setLocalSettings] = useState<DanmuSettings>(settings);

    useEffect(() => {
        setLocalSettings(settings);
    }, [settings]);

    const handleSettingChange = (key: keyof DanmuSettings, value: number | boolean) => {
        const newSettings = { ...localSettings, [key]: value };
        setLocalSettings(newSettings);
        onSettingsChange(newSettings);
    };

    const handleReset = () => {
        const defaultSettings = {
            enabled: true,
            speed: 5,
            fontSize: 16,
            opacity: 0.9,
            maxRows: 6
        };
        setLocalSettings(defaultSettings);
        onSettingsChange(defaultSettings);
    };

    return (
        <div className="danmu-settings-overlay">
            <div className="danmu-settings-panel">
                <div className="danmu-settings-header">
                    <h3>弹幕设置</h3>
                    <button className="danmu-settings-close" onClick={onClose}>
                        ✕
                    </button>
                </div>

                <div className="danmu-settings-content">
                    {/* 弹幕开关 */}
                    <div className="danmu-setting-item">
                        <label className="danmu-setting-label">
                            <input
                                type="checkbox"
                                checked={localSettings.enabled}
                                onChange={(e) => handleSettingChange('enabled', e.target.checked)}
                                className="danmu-setting-checkbox"
                            />
                            <span className="danmu-setting-text">显示弹幕</span>
                        </label>
                    </div>

                    {/* 移动速度 */}
                    <div className="danmu-setting-item">
                        <label className="danmu-setting-label">
                            移动速度: {localSettings.speed}
                        </label>
                        <input
                            type="range"
                            min="1"
                            max="10"
                            value={localSettings.speed}
                            onChange={(e) => handleSettingChange('speed', parseInt(e.target.value))}
                            className="danmu-setting-slider"
                            disabled={!localSettings.enabled}
                        />
                        <div className="danmu-setting-range-labels">
                            <span>慢</span>
                            <span>快</span>
                        </div>
                    </div>

                    {/* 字体大小 */}
                    <div className="danmu-setting-item">
                        <label className="danmu-setting-label">
                            字体大小: {localSettings.fontSize}px
                        </label>
                        <input
                            type="range"
                            min="12"
                            max="24"
                            value={localSettings.fontSize}
                            onChange={(e) => handleSettingChange('fontSize', parseInt(e.target.value))}
                            className="danmu-setting-slider"
                            disabled={!localSettings.enabled}
                        />
                        <div className="danmu-setting-range-labels">
                            <span>小</span>
                            <span>大</span>
                        </div>
                    </div>

                    {/* 透明度 */}
                    <div className="danmu-setting-item">
                        <label className="danmu-setting-label">
                            透明度: {Math.round(localSettings.opacity * 100)}%
                        </label>
                        <input
                            type="range"
                            min="0.1"
                            max="1"
                            step="0.1"
                            value={localSettings.opacity}
                            onChange={(e) => handleSettingChange('opacity', parseFloat(e.target.value))}
                            className="danmu-setting-slider"
                            disabled={!localSettings.enabled}
                        />
                        <div className="danmu-setting-range-labels">
                            <span>透明</span>
                            <span>不透明</span>
                        </div>
                    </div>

                    {/* 最大行数 */}
                    <div className="danmu-setting-item">
                        <label className="danmu-setting-label">
                            最大行数: {localSettings.maxRows}
                        </label>
                        <input
                            type="range"
                            min="1"
                            max="8"
                            value={localSettings.maxRows}
                            onChange={(e) => handleSettingChange('maxRows', parseInt(e.target.value))}
                            className="danmu-setting-slider"
                            disabled={!localSettings.enabled}
                        />
                        <div className="danmu-setting-range-labels">
                            <span>1行</span>
                            <span>8行</span>
                        </div>
                    </div>
                </div>

                <div className="danmu-settings-footer">
                    <button className="danmu-settings-reset" onClick={handleReset}>
                        重置默认
                    </button>
                </div>
            </div>
        </div>
    );
};

export default DanmuSettingsPanel;
